{include file="public/adminhead"}
<link href="{:config('web.cdn')}/static/js/videojs/video-js.min.css" rel="stylesheet">
<script src="{:config('web.cdn')}/static/js/videojs/video.min.js"></script>
<div class="container-fluid p-t-15" id="app">

	<div class="row">
		<div class="col-md-6">
			<div class="card">
				<div class="card-body">
					<form class="form-horizontal" action="#" onsubmit="return false" method="post" enctype="multipart/form-data" >
						<input type="hidden" name="id" v-model="res.id">

						<div class="form-group" v-if="!res.v.content">
							<div class="col-xs-12">
								<div class="layui-upload-drag" id="test1">
									<i class="layui-icon"></i>
									<p>点击上传，或将文件拖拽到此处</p>
									<div class="layui-hide" id="uploadDemoView">
										<hr>
										<img src="" alt="上传成功后渲染" style="max-width: 196px">
									</div>
								</div>
							</div>
						</div>

						<div class="form-group" v-if="res.v.content">
							<div class="col-xs-12">
								<video
										id="my-player"
										class="video-js"
										controls
										preload="auto"
										:poster="res.prefimg"
										data-setup='{}'>
									<source :src="res.v.content" type="video/mp4"></source>
									<p class="vjs-no-js">
										To view this video please enable JavaScript, and consider upgrading to a
										web browser that
										<a href="https://videojs.com/html5-video-support/" target="_blank">
											supports HTML5 video
										</a>
									</p>
								</video>

							</div>
						</div>




						<div class="form-group">
							<div class="col-xs-12">
								<input class="form-control" type="text" v-model="res.title" name="title" placeholder="短视频标题">
								<div class="help-block">短视频标题必须输入</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-xs-12" for="content">短视频地址(上传完成后自动完成)</label>
							<div class="col-xs-12">
								<textarea class="form-control" id="content" name="content" rows="1" placeholder="内容.." v-model="res.v.content"></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="col-xs-12" for="content">视频简介</label>
							<div class="col-xs-12">
								<textarea class="form-control"  name="desc" rows="5" placeholder="简介.." v-model="res.info"></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="col-xs-12" for="cate_id">分类</label>
							<div class="col-xs-12">
								<select class="form-control" id="cate_id" name="cate_id" size="1">
									<option value="0">请选择</option>
									{foreach $cate as $v}
									<option {if isset($res.cate_id) && $res.cate_id == $v.id}selected{/if} value="{$v.id}">{$v.name}</option>
									{/foreach}
								</select>
							</div>
						</div>

						<div class="form-group">
							<div class="col-xs-12">
								<button class="btn btn-primary" type="button" @click="sub()">提交</button>
							</div>
						</div>
					</form>

				</div>
			</div>
		</div>


	</div>

</div>



{include file="public/afooter"}
<script>
	var token = localStorage.getItem("token");
    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,accept:'video'
            ,headers:{
                token:token
			}
            ,multiple:true
            ,drag:true
            //,url: "{:url('Upload/uploads')}" //上传接口
            ,url: "{:url('Upload/minvideo')}" //上传接口
            ,done: function(res, index, upload){
                //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
                console.log(res);
                app.res = res.data;
                var options = {};
                var player = videojs('my-player', options, function onPlayerReady() {
                    videojs.log('Your player is ready!');

                    // In this context, `this` is the player that was created by Video.js.
                    this.play();

                    // How about an event listener?
                    this.on('ended', function() {
                        videojs.log('Awww...over so soon?!');
                    });
                });
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
    var app = new Vue({
        el: '#app',
        data: {
            res:{
                v:[]
			}
        }
        ,methods: {
            sub: function () {
                var url = "{:url('minvideo')}";
                var _self = this
                var formdata = this.res;

                console.log(formdata);
                $.post(url,formdata,function (e) {
                    if(e.code == 200){
                        success("成功");

//                        var index = parent.layer.getFrameIndex(window.name);
//                        setTimeout(function(){parent.layer.close(index)}, 2000);
//                        window.parent.location.reload();
//                        console.log(_self.form);
                    }else {
                        error("失败");
                    }
                })
            },
            del:function(v,i){
                app.form.img.splice(i,1)
                app.form.name.splice(i,1)
            }

        },
        mounted:function(){
            //页面挂载需要运行的函数
        }
    })
</script>